<template>
  <div>
    <el-form :model="form" ref="form" :rules="rules" label-width="80px">
      <el-row>
        <el-col :span="12">
          <el-form-item label="工号" prop="staffNo">
            <el-input v-model="form.staffNo" placeholder="请输入工号" :disabled="true"/>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="姓名" prop="name">
            <el-input v-model="form.name" placeholder="请输入姓名" :disabled="true"/>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="考生部门" prop="userDeptName">
            <el-input v-model="form.userDeptName" :disabled="true" placeholder="请输入考生部门"/>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="题库" prop="questionBankName">
            <el-input v-model="form.questionBankName" :disabled="true" placeholder="请选择题库"/>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="项目代码" prop="projectCode">
            <el-input v-model="form.projectCode" size="small" :disabled="true"/>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="项目名称" prop="projectName">
            <el-input v-model="form.projectName" size="small" :disabled="true"/>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="取证状态" prop="obtainEvidenceStatus">
            <el-select v-model="form.obtainEvidenceStatus" placeholder="请选择取证状态" :disabled="true" size="small"
                       style="width: 100%;">
              <el-option v-for="dict in obtainEvidenceStatusOptions"
                         :key="dict.code"
                         :label="dict.name"
                         :value="dict.code"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="是否补考">
            <el-radio-group v-model="form.isSignUp" :disabled="true">
              <el-radio :label="'0'">是</el-radio>
              <el-radio :label="'1'">否</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
      </el-row>
      <el-form-item label="取消原因" prop="cancelCause" v-if="cancelOpen">
        <el-input v-model="form.cancelCause" type="textarea" placeholder="请输入取消原因" @blur="bindDate"/>
      </el-form-item>
      <el-form-item label="延期原因" prop="postponeCause" v-if="postponeOpen">
        <el-input v-model="form.postponeCause" type="textarea" placeholder="请输入延期原因"/>
      </el-form-item>
      <el-form-item label="延期日期" prop="postponeDate" v-if="postponeOpen">
        <el-date-picker
                v-model="form.postponeDate"
                clearable
                size="small"
                style="width: 240px"
                value-format="yyyy-MM-dd"
                type="date"
                placeholder="延期日期"
                :picker-options="pickerOptions"
        ></el-date-picker>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer" style="float: right">
      <el-button :loading="buttonLoading" size="mini" type="primary" @click="submitForm">保 存</el-button>
      <el-button :loading="buttonLoading" size="mini" @click="cancel">取 消</el-button>
    </div>
  </div>
</template>

<script>
  import {updateSignUp} from "@/api/exam/signUp"
  import {getEmployee} from "@/api/basicdata/employee";

  export default {
    name: "signUp",
    data() {
      return {
        // 禁用当前日期前日期
        pickerOptions: {
          disabledDate(time) {
            return time.getTime() < Date.now() - 8.64e7;
          },
        },
        //遮罩层
        buttonLoading: false,
        //取消原因开关
        cancelOpen: false,
        //延期原因开关
        postponeOpen: false,
        //取证状态
        obtainEvidenceStatusOptions: [],
        //控制普通编辑 取消或延期区域开关
        areaOpen: '',
        form: {},
        rules: {
          cancelCause: [
            {required: true, message: "取消原因不能为空", trigger: "change"},
            {max: 100, message: "原因不能超过100个字符", trigger: "blur"}
          ],
          postponeCause: [
            {required: true, message: "延期原因不能为空", trigger: "change"},
            {max: 100, message: "原因不能超过100个字符", trigger: "blur"}
          ],
          postponeDate: [
            {required: true, message: "延期时间不能为空", trigger: "blur"},
          ]
        }
      }
    },
    created() {
      //取证状态
      this.getDicts("exam_obtain_evidence_status").then(response => {
        this.obtainEvidenceStatusOptions = response.responseBody.result;
      })
    },
    methods: {
      //绑定题库数据
      bindQuestionBankData(val) {
        for (let i = 0; i < this.questionBankListOptions.length; i++) {
          if (this.questionBankListOptions[i].questionBankName == val) {
            this.form.questionBankId = this.questionBankListOptions[i].questionBankId;
            this.form.projectCode = this.questionBankListOptions[i].projectCode;
            this.form.projectName = this.questionBankListOptions[i].projectName;
            break
          }
        }
      },
      //绑定日期
      bindDate() {
        let year = new Date().getFullYear();
        let month = new Date().getMonth() + 1;
        let day = new Date().getDate();
        this.form.cancelDate = year + "-" + month + "-" + day;
      },
      //关闭dialog
      cancel() {
        this.$emit("cancelDialog");
      },
      // 获取考试信息
      getEmployeeInfo() {
        this.loading = true
        const searchParams = {
          searchParams: {"employeeId": this.form.staffNo}
        };
        getEmployee(searchParams).then(res => {
          if (res.retCode === '200') {
            if (res.responseBody.length === 1) {
              this.form.name = res.responseBody[0].employeeName;
              this.form.userDeptName = res.responseBody[0].orgName;
            }
            this.loading = false
          } else {
            console.log(res.message)
          }
        }).catch(err => {
          this.loading = false
          console.log(err)
        })
      },

      // 提交
      submitForm() {
        this.$refs["form"].validate(valid => {
          if (valid) {
            this.buttonLoading = true;
            updateSignUp(this.form).then(response => {
              if (response.retCode === '200') {
                this.msgSuccess(response.message);
              }
              this.$emit("submitSuccess");
            }).finally(() => {
              this.buttonLoading = false;
            });
          }
        });
      },
    }
  }
</script>

<style scoped>

</style>
